<template>
  <div ref="refDom" @scroll="scroll" class="out-container">
    <div class="container">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="'#icon-a-zujiankubao'"></use>
      </svg>
      <span class="version-text">V1.0.1</span>
      <div class="box">
        <p>XJComponent</p>
        <div
          style="
            width: 100%;
            height: 2px;
            margin: 40px 0px;
            background-color: white;
          "
        ></div>
        <xj-button type="warning" @click="toMakdowm">
          {{ $t("点击进入") }}</xj-button
        >
      </div>
      <svg class="animation-in" aria-hidden="true" @click="transmitBottom">
        <use xlink:href="#icon-jinrujiantou1"></use>
      </svg>
    </div>
    <div class="dowm-container">
      <div v-if="isshowIcon" class="top-icon" @click="totop">
        <div class="top-icon-arrow"></div>
      </div>
      <div class="dowm-box">
        <img src="https://www.firstui.cn/img/img_code.png" />
        <text-list title="完善的组件库" :option-list="list"></text-list>
      </div>
    </div>
    <div class="dowm-container">
      <div class="dowm-box">
        <text-list title="海量优质模板" :option-list="list2"></text-list>
        <img src="https://www.firstui.cn/img/img_mod.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import textList from "./textList.vue";
import { ref, onUnmounted, watch, nextTick } from "vue";
let isshowIcon = ref(false);
function totop() {
  timed = setInterval(() => {
    if (refDom.value.scrollTop > 0) {
      refDom.value.scrollTop -= 20;
    } else {
      clearInterval(timed);
    }
  }, 20);
}

const router = useRouter();
function toMakdowm() {
  router.push({
    path: "/components",
  });
}
let list = ref([
  "海量组件选择",
  "多重样式变化",
  "时尚简约设计规范",
  "框架适配强",
  "详细代码提示",
]);
let list2 = ref(["登录", "签到", "新闻", "门户", "商城"]);
let bottomDistance = ref("40px");
let timer = setInterval(() => {
  bottomDistance.value = bottomDistance.value == "40px" ? "10px" : "40px";
}, 1000);
onUnmounted(() => {
  clearInterval(timer);
});
let timed = null;
let refDom = ref(null);
let windowHeight = ref(103 + "vh");
function transmitBottom() {
  timed = setInterval(() => {
    if (refDom.value.scrollTop < 730) {
      refDom.value.scrollTop += 20;
    } else {
      clearInterval(timed);
    }
  }, 20);
}
const scroll = (e) => {
  let num = e.target.scrollTop; // 滚动条距离顶部的距离
  isshowIcon.value = num > 300 ? true : false;
};
</script>
<style lang="scss" scoped>
.top-icon {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 52px;
  bottom: 77px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 5;
  &:hover {
    background-color: #f2f6fc;
  }
  .top-icon-arrow {
    border-top: 8px solid transparent;
    border-bottom: 8px solid #409eff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: relative;
    bottom: 15px;
  }
}
.out-container {
  overflow: scroll;
  height: v-bind(windowHeight);
  margin-bottom: -17px;
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  background-image: url("./bg_banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  .animation-in {
    width: 40px;
    height: 40px;
    bottom: v-bind(bottomDistance);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transform: rotate(90deg);
    transition: all 1s ease;
    cursor: pointer;
  }
  .icon {
    position: absolute;
    top: 10px;
    left: 6%;
    width: 40px;
    height: 40px;
  }
  .version-text {
    position: absolute;
    top: 4%;
    left: 9%;
    color: white;
    font-size: 12px;
    font-weight: bold;
  }
  .box {
    margin-left: 6%;
    p {
      color: white;
      font-family: AlibabaPuHuiTiB;
      line-height: 99px;
      font-size: 72px;
    }
    button {
      margin-top: 20px;
    }
  }
}
.dowm-container {
  width: 900px;
  margin: 0 auto;
  .dowm-box {
    width: 900px;
    display: flex;
    justify-content: space-around;
    img {
      width: 450px;
      height: 450px;
    }
  }
}
</style>
